<template>
  <div class="detail-good-data-info">
    <div class="good-data">
      <div class="start"></div>
      <div class="end"></div>
      <p>{{detailInfo.desc}}</p>
    </div>

    <div class="good-images">
      <div class="good-item-image" v-for="(item, index) in detailInfo.detailImage" :key="index">
        <p>{{item.key}}</p>
        <div v-for="(i, index) in item.list" :key="index">
          <img :src="i" alt="" @load="imgLoaded">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailGoodDataInfo',
  props: {
    detailInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    imgLoaded() {
      this.$emit('imgLoaded')
    }
  }
}
</script>

<style scoped>
  /* 商品整个区域 */
  .detail-good-data-info{
    border-bottom: 12px solid rgba(112, 109, 109, 0.1);
    padding-bottom: 30px;
  }
  /* 商品详细文字区域 */
  .good-data{
    padding: 15px 8px;
    margin-bottom: 20px;
    position: relative;
  }
  .good-data p{
    padding: 20px;
    text-align: center;
  }
  .good-data .start, .good-data .end{
    height: 1px;
    width: 100px;
    background-color: black;
  }
  .good-data .start{
    position: absolute;
    top: 10px;
    left: 0;
  }
  .good-data .start::before{
    content: '';
    position: absolute;
    height: 5px;
    width: 5px;
    background-color: black;
    left: 0;
  }
  .good-data .end{
    position: absolute;
    right: 0px;
    bottom: 5px;
  }
  .good-data .end::before{
    content: '';
    height: 5px;
    width: 5px;
    background-color: black;
    position: absolute;
    right: 0;
    bottom: 0;
    
  }
  /* 图片区域 */
  .good-images p{
    color: black;
  }
  .good-item-image img{
    width: 100%;
    vertical-align: middle;
  }
</style>